<template>
  <!-- 会员管理 -->
  <div class="member-manager">
    <!-- 操控区 -->
    <div class="handler-box">
      <el-button
        type="success"
        icon="el-icon-plus"
        size="medium"
        @click="noRemove"
      >
        解除禁用
      </el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="medium"
        :round="true"
        @click="remove"
      >
        禁用账户
      </el-button>
    </div>
    <!-- 表格区 -->

    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="changeSelects"
    >
      <el-table-column type="selection" min-width="5%" align="center">
      </el-table-column>

      <el-table-column
        prop="nickName"
        label="昵称"
        min-width="20%"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="loginName"
        label="登录名"
        min-width="20%"
        align="center"
      >
      </el-table-column>

      <!--  <el-table-column
          prop="lockedFlag"
          label="身份状态"
          min-width="15%"
          align="center"
        >
        </el-table-column> 
        
         <el-table-column
        prop="isDeleted"
        label="是否注销"
        min-width="15%"
        align="center"
      >
      </el-table-column>
        -->
      <el-table-column
        prop="lockedFlag"
        label="身份状态"
        min-width="15%"
        align="center"
      >
        <template #default="{ row }">
          <el-link type="danger" v-if="row.lockedFlag == 1">禁用</el-link>
          <el-link type="success" v-else>正常</el-link>              
        </template>
      </el-table-column>

      <el-table-column
        prop="isDeleted"
        label="是否注销"
        min-width="15%"
        align="center"
      >
        <template #default="{ row }">
          <el-link type="danger" v-if="row.lockedFlag == 1">正常</el-link>
          <el-link type="success" v-else>正常</el-link>              
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间"
        min-width="25%"
        align="center"
      >
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      background
      layout="prev, pager, next"
      align="center"
      :total="total"
      :page-size="pagesize"
      :current-page="page"
      :hide-on-single-page="true"
      @current-change="paginationChange"
      @prev-click="paginationChange"
      @next-click="paginationChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "member-manager",
  data() {
    return {
      userId: "",
      tableData: [],
      total: 0,
      pagesize: 10,
      page: 1,
      selects: [],
    };
  },
  methods: {
    async query() {
      try {
        let { resultCode, data } = await this.$api.MemberManager.users(
          this.page,
          this.pagesize
        );
        if (+resultCode !== 200) {
          this.tableData = [];
          console.log("失败");
          return;
        }
        let { totalCount, list } = data;
        this.tableData = list;
        console.log(this.tableData, "111");
        this.total = totalCount;
      } catch (_) {}
    },
    //把勾选的放给selects
    changeSelects(val) {
      this.selects = val.map((item) => item.userId);
    },

    //禁用
    async remove() {
      let selects = this.selects;
      if (selects.length == 0) {
        this.$message.error("请至少选择一项");
        return;
      }
      let { resultCode } = await this.$api.MemberManager.usersRemove(selects);
      console.log(+resultCode);
      if (+resultCode !== 200) {
        this.$message.error("禁用失败，请稍后再试~~~");
        return;
      }
      this.$message.success("禁用成功");
      if (this.page !== 1 && this.tableData.length === 1) {
        this.page--;
      }
      this.query();
    },
    //解除
    async noRemove() {
      let selects = this.selects;
      if (selects.length == 0) {
        this.$message.error("请至少选择一项");
        return;
      }
      let { resultCode } = await this.$api.MemberManager.usersUpdate(selects);
      console.log(+resultCode);
      if (+resultCode !== 200) {
        this.$message.error("解除禁用失败，请稍后再试~~~");
        return;
      }
      this.$message.success("解除禁用成功");
      if (this.page !== 1 && this.tableData.length === 1) {
        this.page--;
      }
      this.query();
    },
    //分页
    paginationChange(val) {
      this.page = +val;
      this.query();
    },
  },
  /*  computed: {
    memberData() {
      return this.tableData.map((item) => {
        item.lockedFlag = item.lockedFlag === 0 ? "正常" : "禁用";
        item.isDeleted = item.isDeleted === 0 ? "正常" : "禁用";
        return item;
      });
    },
  }, */

  created() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table .cell {
  font-size: 16px;
  font-weight: 500;
  color: #606266;
}

/deep/.el-table .el-table__cell {
  height: 100px;
  line-height: 100px;
}

/deep/.el-pagination {
  padding: 13px 5px;
  color: #303133;
  font-weight: 700;
}
</style>